<template>
  <ContentWrap>
    <el-form ref="formRef" :model="formData" label-width="180px">
      <!-- 顶部分佣比例 -->
      <!-- <el-form-item label="佣金的" prop="commissionBasePercent">
        <el-input-number v-model="formData.commissionBasePercent" :min="0" :max="100" controls-position="right" class="!w-100px mr-2" />
        <span>% 用于分佣</span>
      </el-form-item> -->

      <el-divider content-position="left">分佣</el-divider>

      <el-radio-group v-model="formData.commissionType" class="ml-4 mb-3">
        <el-radio label="online">开启线上商城分佣</el-radio>
        <el-radio label="service">开启服务套餐分佣</el-radio>
      </el-radio-group>

      <!-- 线上商城分佣 -->
      <div v-if="formData.commissionType === 'online'">
        <el-form-item label="线上商城分佣比例" prop="onlineCommissionPercent">
           <el-input-number v-model="formData.onlineCommissionPercent" :min="0" :max="100" controls-position="right" class="!w-200px mr-2" />
           <span>%</span>
           <div class="text-xs text-gray-400">按照商品分销类型计算</div>
        </el-form-item>
      </div>

      <!-- 服务套餐分佣 -->
      <div v-if="formData.commissionType === 'service'">
        <h4 class="ml-4 mb-2 font-medium">A门店客户, A门店服务</h4>
        <el-form-item label="套餐分佣比例" prop="serviceCommissionAA">
           <el-input-number v-model="formData.serviceCommissionAA" :min="0" :max="100" controls-position="right" class="!w-200px mr-2" />
           <span>%</span>
        </el-form-item>

        <h4 class="ml-4 my-2 font-medium">A门店客户, B门店服务</h4>
        <el-form-item label="套餐分佣比例" prop="serviceCommissionAB">
          <span class="mr-2">A 门店</span>
          <el-input-number v-model="formData.serviceCommissionAB_A" :min="0" :max="100" controls-position="right" class="!w-100px mr-2" />
          <span class="mr-4">%</span>
          <span class="mr-2">B 门店</span>
          <el-input-number v-model="formData.serviceCommissionAB_B" :min="0" :max="100" controls-position="right" class="!w-100px mr-2" />
          <span>%</span>
          <!-- 可以添加校验规则确保 A + B = 100 -->
        </el-form-item>
      </div>

      <el-divider content-position="left">提现</el-divider>

      <el-row :gutter="20">
        <el-col :span="12">
          <h4 class="ml-4 mb-2 font-medium">线上商城分佣</h4>
          <el-form-item label="冻结转余额时间">
            <span class="mr-2">收货后</span>
            <el-input-number v-model="formData.onlineFreezeDays" :min="0" controls-position="right" class="!w-100px mr-2" />
            <span>天</span>
          </el-form-item>
           <el-form-item label="最低提现金额" prop="onlineMinWithdrawal">
            <el-input-number v-model="formData.onlineMinWithdrawal" :min="0" :precision="2" controls-position="right" class="!w-150px mr-2" />
            <span>元</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
           <h4 class="ml-4 mb-2 font-medium">到店服务分佣</h4>
           <el-form-item label="冻结转余额时间">
             <span class="mr-2">支付后</span>
             <el-input-number v-model="formData.serviceFreezeDays" :min="0" controls-position="right" class="!w-100px mr-2" />
             <span>天</span>
           </el-form-item>
        </el-col>
      </el-row>

       <!-- 可以添加保存按钮等 -->
       <!--
       <el-form-item class="mt-4">
         <el-button type="primary" @click="submitForm">保存规则</el-button>
       </el-form-item>
       -->

    </el-form>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const formRef = ref() // 用于表单验证 (如果需要)
const formData = reactive({
  commissionBasePercent: 0, // 佣金的 X % 用于分佣
  commissionType: 'online', // 'online' 或 'service'
  onlineCommissionPercent: 0, // 线上商城分佣比例
  serviceCommissionAA: 100, // A客户A服务 默认100%
  serviceCommissionAB_A: 20, // A客户B服务 - A门店比例
  serviceCommissionAB_B: 80, // A客户B服务 - B门店比例
  onlineFreezeDays: 7, // 线上冻结天数 示例值
  onlineMinWithdrawal: 100, // 线上最低提现 示例值
  serviceFreezeDays: 1 // 服务冻结天数 示例值
})

// 提交表单的逻辑（如果需要）
// const submitForm = async () => {
//   if (!formRef.value) return
//   try {
//     await formRef.value.validate()
//     // 在这里处理表单提交，例如发送 API 请求
//     console.log('提交门店规则:', formData)
//     // message.success('保存成功') // 需要引入 useMessage
//   } catch (error) {
//     console.log('表单验证失败:', error)
//   }
// }
</script>